<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统 - 客户</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-y: hidden;
            /* 隐藏右侧滚动条 */
            scrollbar-width: none; /* Firefox */
        }
        body::-webkit-scrollbar, html::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }
        #app, .el-container {
            min-height: 100vh;
            height: 100%;
        }
        .el-main {
            min-height: calc(100vh - 60px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f5f7fa;
        }
        .el-header {
            background-color: #409EFF;
            color: white;
            line-height: 60px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
        .el-aside {
            background-color: #fff;
            border-right: solid 1px #e6e6e6;
            box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
        }
        .el-menu {
            border-right: none;
        }
        .el-menu-item {
            height: 50px;
            line-height: 50px;
        }
        .el-menu-item i {
            margin-right: 5px;
        }
        .operation-buttons {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .page-title {
            font-size: 20px;
            color: #303133;
            margin: 0;
        }
        .el-table {
            margin-top: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .el-form {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .el-form-item__label {
            font-weight: bold;
        }
        .el-button {
            padding: 10px 20px;
        }
        .el-button--primary {
            background-color: #409EFF;
        }
        .el-button--danger {
            background-color: #F56C6C;
        }
        .el-table th {
            background-color: #f5f7fa;
        }
        .el-pagination {
            margin-top: 20px;
            text-align: right;
        }
        .card-info {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-info h3 {
            margin-top: 0;
            color: #303133;
        }
        .card-info p {
            margin: 10px 0;
            color: #606266;
        }
        .card-info .balance {
            font-size: 24px;
            color: #409EFF;
            font-weight: bold;
        }
        .transaction-form {
            max-width: 400px;
        }
        .user-info-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
            padding: 32px 24px;
            margin-bottom: 32px;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .user-info-card h2 {
            color: #409EFF;
            margin-bottom: 18px;
            font-size: 22px;
            font-weight: bold;
        }
        .user-info-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .user-info-card li {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }
        .account-operation-wrapper {
            flex: 1 1 auto;
            width: 100%;
            max-width: 1100px;
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 40px;
            margin: 40px auto 32px auto;
        }
        .account-info-card, .operation-panel {
            flex: 1 1 0;
            min-width: 340px;
            max-width: 500px;
            min-height: 420px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
            padding: 32px 36px 24px 36px;
            display: flex;
            flex-direction: column;
        }
        .account-info-card h2 {
            color: #409EFF;
            margin-bottom: 18px;
            font-size: 22px;
            font-weight: bold;
            text-align: center;
        }
        .account-info-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .account-info-card li {
            font-size: 16px;
            color: #333;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        .account-info-card .balance {
            color: #409EFF;
            font-weight: bold;
            font-size: 18px;
            margin-left: 4px;
        }
        .operation-panel {
            min-width: 320px;
            max-width: 400px;
            gap: 24px;
        }
        .transaction-form {
            margin-bottom: 0;
        }
        .my-account-active {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f5f7fa;
        }
        .my-account-active .account-operation-wrapper {
            flex: 1 1 auto;
            width: 100%;
            max-width: 1100px;
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 40px;
            margin: 40px auto 32px auto;
        }
        .my-account-active .account-info-card, .my-account-active .operation-panel {
            flex: 1 1 0;
            min-width: 340px;
            max-width: 500px;
            min-height: 420px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
            padding: 32px 36px 24px 36px;
            display: flex;
            flex-direction: column;
        }
        .my-account-active .operation-panel {
            min-width: 320px;
            max-width: 400px;
            gap: 24px;
        }
        .trade-list-page {
            width: 100%;
            padding: 0 32px 0 0;
            margin: 0;
            background: none;
        }
        .trade-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0;
            margin-bottom: 18px;
            padding-left: 16px;
        }
        .trade-list-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: #222;
        }
        .trade-table-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
            padding: 0 0 8px 0;
            margin-left: 8px;
        }
        .el-table {
            background: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>银行管理系统 - 客户</h2>
                <div>
                    <el-button type="text" style="color: white;" @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                        <el-menu-item index="1">
                            <i class="el-icon-money"></i>
                            <span>我的账户</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-refresh"></i>
                            <span>转账</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span>交易记录</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-warning"></i>
                            <span>挂失</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <i class="el-icon-key"></i>
                            <span>修改密码</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main :class="{ 'my-account-active': currentView === 'account' }">
                    <!-- 我的账户 -->
                    <div v-if="currentView === 'account'">
                        <div class="account-operation-wrapper">
                            <div class="account-info-card">
                                <h2>账号与账户信息</h2>
                                <ul>
                                    <li><strong>姓名：</strong>{{ userInfo ? userInfo.customerName : '—' }}</li>
                                    <li><strong>身份证号：</strong>{{ userInfo ? userInfo.pid : '—' }}</li>
                                    <li><strong>手机号：</strong>{{ userInfo ? userInfo.telephone : '—' }}</li>
                                    <li><strong>联系地址：</strong>{{ userInfo ? userInfo.address : '—' }}</li>
                                    <li><strong>卡号：</strong>{{ cardInfo.cardID || '—' }}</li>
                                    <li><strong>币种：</strong>{{ cardInfo.curID || '—' }}</li>
                                    <li><strong>存款类型：</strong>{{ getSavingName(cardInfo.savingID) }}</li>
                                    <li><strong>开户日期：</strong>{{ formatDate(cardInfo.openDate) || '—' }}</li>
                                    <li><strong>账户余额：</strong><span class="balance">¥{{ cardInfo.balance !== undefined && cardInfo.balance !== null ? cardInfo.balance : '—' }}</span></li>
                                    <li><strong>挂失状态：</strong>{{ cardInfo.isReportLoss === '是' || cardInfo.isReportLoss === '1' ? '已挂失' : '正常' }}</li>
                                </ul>
                            </div>
                            <div class="operation-panel">
                                <el-form :model="depositForm" label-width="120px" class="transaction-form">
                                    <el-form-item label="存款金额">
                                        <el-input-number v-model="depositForm.amount" :min="0" :precision="2" style="width: 100%"></el-input-number>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleDeposit">存款</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-form :model="withdrawForm" label-width="120px" class="transaction-form">
                                    <el-form-item label="取款金额">
                                        <el-input-number v-model="withdrawForm.amount" :min="0" :precision="2" style="width: 100%"></el-input-number>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleWithdraw">取款</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>

                    <!-- 转账 -->
                    <div v-if="currentView === 'transfer'">
                        <h3 class="page-title">转账</h3>
                        <el-form :model="transferForm" label-width="120px" class="transaction-form">
                            <el-form-item label="对方卡号" prop="targetCardID">
                                <el-input v-model="transferForm.targetCardID" placeholder="请输入对方卡号" maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item label="转账金额" prop="amount">
                                <el-input-number v-model="transferForm.amount" :min="0" :precision="2" style="width: 100%"></el-input-number>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleTransfer">确认转账</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 交易记录 -->
                    <div v-if="currentView === 'tradeList'" class="trade-list-page">
                        <div class="trade-list-header">
                            <span class="trade-list-title">交易记录</span>
                            <el-button type="primary" @click="exportTradeData">
                                <i class="el-icon-download"></i> 导出数据
                            </el-button>
                        </div>
                        <div class="trade-table-container">
                            <el-table :data="tradeList" style="width: 100%;" border stripe>
                                <el-table-column prop="tradeDate" label="交易时间" width="180"></el-table-column>
                                <el-table-column prop="tradeType" label="交易类型" width="120"></el-table-column>
                                <el-table-column prop="cardID" label="卡号" width="180"></el-table-column>
                                <el-table-column prop="tradeMoney" label="交易金额" width="120"></el-table-column>
                                <el-table-column prop="remark" label="备注"></el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <!-- 挂失 -->
                    <div v-if="currentView === 'reportLoss'">
                        <h3 class="page-title">银行卡挂失</h3>
                        <el-form :model="reportLossForm" label-width="120px" class="transaction-form">
                            <el-form-item label="卡号">
                                <el-input v-model="reportLossForm.cardID" disabled maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="reportLossForm.password" type="password" placeholder="请输入密码" maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="handleReportLoss">确认挂失</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 修改密码 -->
                    <div v-if="currentView === 'changePassword'">
                        <h3 class="page-title">修改密码</h3>
                        <el-form :model="passwordForm" label-width="120px" class="transaction-form">
                            <el-form-item label="卡号">
                                <el-input v-model="passwordForm.cardID" disabled maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item label="原密码" prop="oldPassword">
                                <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码" maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPassword">
                                <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="confirmPassword">
                                <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" maxlength="16"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleChangePassword">确认修改</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentView: 'account',
                userInfo: null,
                cardInfo: {},
                tradeList: [],
                depositForm: {
                    amount: 0
                },
                withdrawForm: {
                    amount: 0
                },
                transferForm: {
                    targetCardID: '',
                    amount: 0
                },
                reportLossForm: {
                    cardID: '',
                    password: ''
                },
                passwordForm: {
                    cardID: '',
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                },
                depositTypes: []
            },
            created() {
                this.loadCardInfoByCardID();
                this.loadDepositTypes();
            },
            methods: {
                handleSelect(key) {
                    switch(key) {
                        case '1': this.currentView = 'account'; break;
                        case '2': this.currentView = 'transfer'; break;
                        case '3': this.showTradeList(); break;
                        case '4': this.showReportLoss(); break;
                        case '5': this.showChangePassword(); break;
                    }
                },
                logout() {
                    localStorage.removeItem('loginPid');
                    window.location.href = 'login.html';
                },
                loadCardInfoByCardID() {
                    const cardID = localStorage.getItem('loginCardID');
                    if (!cardID) return;
                    axios.get(`/api/card/${cardID}`)
                        .then(res => {
                            if (res.data && res.data.data) {
                                this.cardInfo = res.data.data;
                                this.loadUserInfoByCustomerId(this.cardInfo.customerID);
                            }
                        });
                },
                loadUserInfoByCustomerId(customerID) {
                    axios.get(`/api/user/find`, { params: { customerID } })
                        .then(res => {
                            if (res.data && res.data.data) {
                                this.userInfo = res.data.data;
                            }
                        });
                },
                formatDateTime(date) {
                    const pad = n => n < 10 ? '0' + n : n;
                    return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
                },
                handleDeposit() {
                    if (this.depositForm.amount <= 0) {
                        this.$message.warning('请输入有效的存款金额');
                        return;
                    }
                    axios.post('/api/trade/deposit', {
                        cardID: this.cardInfo.cardID,
                        tradeMoney: this.depositForm.amount,
                        tradeType: '存入',
                        tradeDate: this.formatDateTime(new Date()),
                        remark: '用户存款'
                    })
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success('存款成功');
                            this.loadCardInfoByCardID();
                            this.loadTradeList(this.cardInfo.cardID);
                            this.depositForm.amount = 0;
                        } else {
                            this.$message.error(response.data.message || '存款失败');
                        }
                    })
                },
                handleWithdraw() {
                    if (this.withdrawForm.amount <= 0) {
                        this.$message.warning('请输入有效的取款金额');
                        return;
                    }
                    if (this.withdrawForm.amount > this.cardInfo.balance) {
                        this.$message.warning('余额不足');
                        return;
                    }
                    axios.post('/api/trade/withdraw', {
                        cardID: this.cardInfo.cardID,
                        tradeMoney: Number(this.withdrawForm.amount),
                        tradeType: '支取',
                        tradeDate: this.formatDateTime(new Date()),
                        remark: '用户取款'
                    })
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success('取款成功');
                            this.loadCardInfoByCardID();
                            this.loadTradeList(this.cardInfo.cardID);
                            this.withdrawForm.amount = 0;
                        } else {
                            this.$message.error(response.data.message || '取款失败');
                        }
                    })
                },
                handleTransfer() {
                    if (!this.transferForm.targetCardID) {
                        this.$message.warning('请输入对方卡号');
                        return;
                    }
                    if (this.transferForm.amount <= 0) {
                        this.$message.warning('请输入有效的转账金额');
                        return;
                    }
                    if (this.transferForm.amount > this.cardInfo.balance) {
                        this.$message.warning('余额不足');
                        return;
                    }
                    axios.post('/api/trade/transfer', {
                        sourceCardID: this.cardInfo.cardID,
                        targetCardID: this.transferForm.targetCardID,
                        amount: this.transferForm.amount
                    })
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success('转账成功');
                            this.loadCardInfoByCardID();
                            this.loadTradeList(this.cardInfo.cardID);
                            this.transferForm.targetCardID = '';
                            this.transferForm.amount = 0;
                        } else {
                            this.$message.error(response.data.message || '转账失败');
                        }
                    })
                },
                handleReportLoss() {
                    if (!this.reportLossForm.password) {
                        this.$message.warning('请输入密码');
                        return;
                    }
                    axios.post('/api/card/report-loss', {
                        cardID: this.reportLossForm.cardID,
                        password: this.reportLossForm.password
                    })
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success('挂失成功');
                            this.loadCardInfoByCardID();
                            this.reportLossForm.password = '';
                        } else {
                            this.$message.error(response.data.message || '挂失失败');
                        }
                    })
                    .catch(error => {
                        this.$message.error('挂失失败');
                    });
                },
                handleChangePassword() {
                    if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
                        this.$message.warning('请填写完整的密码信息');
                        return;
                    }
                    if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                        this.$message.warning('两次输入的新密码不一致');
                        return;
                    }
                    axios.post('/api/card/change-password', {
                        cardID: this.passwordForm.cardID,
                        oldPassword: this.passwordForm.oldPassword,
                        newPassword: this.passwordForm.newPassword
                    })
                    .then(response => {
                        this.$message.success('密码修改成功');
                        this.passwordForm.oldPassword = '';
                        this.passwordForm.newPassword = '';
                        this.passwordForm.confirmPassword = '';
                    })
                    .catch(error => {
                        this.$message.error('密码修改失败');
                    });
                },
                exportTradeData() {
                    window.location.href = `/api/export/trade?cardID=${this.cardInfo.cardID}`;
                },
                formatDate(dateStr) {
                    if (!dateStr) return '';
                    const d = new Date(dateStr);
                    if (isNaN(d.getTime())) return dateStr;
                    const pad = n => n < 10 ? '0' + n : n;
                    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
                },
                loadDepositTypes() {
                    axios.get('/api/deposit/list')
                        .then(res => {
                            if (res.data && res.data.length) {
                                this.depositTypes = res.data;
                            }
                        });
                },
                getSavingName(savingID) {
                    const type = this.depositTypes.find(item => item.savingID === savingID);
                    return type ? type.savingName : savingID;
                },
                showTradeList() {
                    this.currentView = 'tradeList';
                    this.loadTradeListByCustomer();
                },
                loadTradeListByCustomer() {
                    if (!this.userInfo || !this.userInfo.customerID) return;
                    axios.get(`/api/trade/customer/${this.userInfo.customerID}`)
                        .then(res => {
                            this.tradeList = res.data.data || [];
                        });
                },
                showReportLoss() {
                    this.currentView = 'reportLoss';
                    if (this.cardInfo && this.cardInfo.cardID) {
                        this.reportLossForm.cardID = this.cardInfo.cardID;
                    }
                },
                showChangePassword() {
                    this.currentView = 'changePassword';
                    if (this.cardInfo && this.cardInfo.cardID) {
                        this.passwordForm.cardID = this.cardInfo.cardID;
                    }
                }
            }
        });
    </script>
</body>
</html> 